/* eslint-disable no-undef */
/* eslint-disable react/react-in-jsx-scope */

import { RootState } from '@/types/store'
import { Input, NavBar, TextArea } from 'antd-mobile'
import { InputRef } from 'antd-mobile/es/components/input'
import { TextAreaRef } from 'antd-mobile/es/components/text-area'
import { useEffect, useRef, useState } from 'react'
import { useSelector } from 'react-redux'

import styles from './index.module.scss'
// 接收onUpdate
type Props = {
    hideName: () => void
    type:'' | 'name' | 'intro'
    onUpdate:(type:string, value:string)=>void
  }
const EditInput = ({ hideName, type, onUpdate }:Props) => {
  const { userProfile } = useSelector((state:RootState) => state.profile)
  const [value, setValue] = useState(
    type === 'name' ? userProfile.name : userProfile.intro
  )
  const onClick = () => {
    // todo 判断是否为空
    onUpdate(type, value)
  }
  const inputRef = useRef<InputRef>(null)
  const textRef = useRef<TextAreaRef>(null)
  useEffect(() => {
    if (type === 'name') {
      inputRef.current?.focus()
    } else {
      textRef.current?.focus()
      document.querySelector('textarea')?.setSelectionRange(-1, -1)
    }
  }, [type])

  return (
    <div className={styles.root}>
      <NavBar className="navbar" right={<span className="commit-btn" onClick={onClick}>提交</span>}
      onBack={() => hideName()}
      >
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>

      <div className="edit-input-content">
        <h3> 编辑{type === 'name' ? '昵称' : '简介'}</h3>

         {type === 'name'
           ? (
        <div className="input-wrap">
          <Input ref={inputRef} placeholder="请输入昵称" value={value} onChange={e => setValue(e)} maxLength={11} />
        </div>)
           : (<TextArea
           ref={textRef}
            className="textarea"
            placeholder="请输入简介"
            showCount
            maxLength={99}
            value={value}
            onChange={e => setValue(e)}
          />)
        }
      </div>
    </div>
  )
}

export default EditInput
